<template>
    <div>
        <!-- <div class="cloginLogo">
             <img src="../../assets/logo2.png"/>
         </div>-->
        <div class="clogin">

            <div class="all" v-if="isAppShow">
                <div id="left-model" class="left-model" v-show="isAppShow">

                    <div style="width:187px;margin:auto">
                        <img src="../../assets/logo.png" width="187px" height="137px"
                             style="margin-top:60px;position:absolute"/>
                    </div>
                    <div style="width:220px;margin:auto;">
                        <span class="fontName" style="margin-top: 210px;position:absolute">安全与环保信息管理平台</span>
                    </div>
                </div>
            </div>
            <div class="bottomTips">
             <p>联系方式：15201582845|shanxiuhui@cnpc.com.cn</p>
             <p >北京金隅集团股份有限公司 版权所有</p>
        </div>
        </div>
    </div>
</template>
<script>
    import md5 from 'js-md5';
    import {Api} from '../../api/index.js'
    import {sessionStorage, cookie} from '../../common/cacheUtils.js';

    export default {
        data() {
            return {
                passwordCheckbox: false,
                styleSwiper: {
                    width: '450px',
                    height: '500px'
                },
                styleSwiperImg: {
                    width: '450px',
                    height: '450px'
                },
                isAppShow: true,
                language: 'zh_CN',
                swiperList: [{
                    id: '1',
                    imgUrl: './assets/img/tooltip1.png'
                }, {
                    id: '2',
                    imgUrl: '../../assets/img/tooltip1.png'
                }, {
                    id: '3',
                    imgUrl: '../../assets/img/tooltip1.png'
                }, {
                    id: '4',
                    imgUrl: '../../assets/img/tooltip1.png'
                }, {
                    id: '5',
                    imgUrl: '../../assets/img/tooltip1.png'
                }],
                languageList: [
                    {
                        value: 'zh_CN',
                        label: '中文'
                    },
                    {
                        value: 'en_US',
                        label: '英文'
                    }
                ],
                ruleCustom: {
                    user: [{
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error(' '));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }],
                    password: [{
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error(' '));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }]
                },
                formInline: {
                    user: '',
                    password: '',
                    remeberMe:true,
                    select: 'cnpc'
                },
                swiperOption: {
                    spaceBetween: 30,
                    centeredSlides: true,
                    observer: true,
                    observeParents: true,
                    slidesPerView: 1,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }

                }
            }
        },
        mounted: function () {
            let cw = document.body.clientWidth;
            if (cw > 1366) {
                this.styleSwiper.width = '600px';
                this.styleSwiper.height = '650px';
                this.styleSwiperImg.width = '600px';
                this.styleSwiperImg.height = '600px';
            }
        },
        created() {
            let that = this;
            document.onkeydown = function (e) {
                e = window.event || e;
                if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'enter')) { //验证在登录界面和按得键是回车键enter
                    that.handleSubmit(); //登录函数
                }
            };
        },
        methods: {
            QRCode(show) {
                this.isAppShow = show;
            },
            loginkeydown(e) {
                console.log(e)
            },
            handleSubmit() {
                this.$refs['formInline'].validate((valid) => {
                    if (valid) {
                        this.$http.get(Api.login, {
                            params: {
                                loginId: this.formInline.user,
                                password: md5(this.formInline.password),
                                type: 'loacl'
                            }
                        }).then(res => {
                            let data = JSON.stringify(res.data.data);
                            if (res.data.result == 'true') {
                                if (this.formInline.remeberMe) {
                                    this.setCookie(this.formInline.user, this.formInline.password, 14);
                                   /* if (cookie.getObject('usercookie')) {
                                        let usercookie = cookie.getObject('usercookie')
                                        let tage = true;
                                        usercookie.map(item => {
                                            if (item.loginId == this.formInline.user) {
                                                tage = false
                                                item.loginId = this.formInline.user
                                                item.password = this.formInline.password
                                            }
                                        });
                                        if (tage) {
                                            let obj = {
                                                loginId: this.formInline.user,
                                                password: this.formInline.password,
                                            }
                                            usercookie.push(obj)
                                        }
                                        cookie.setObject('usercookie', usercookie);
                                    }*/
                                } else {
                                    this.clearCookie(this.formInline.user);
                                   /* let arr = []
                                    let obj = {
                                        loginId: this.formInline.user,
                                        password: this.formInline.password,
                                    }
                                    arr.push(obj)
                                    cookie.setObject('usercookie', arr);*/
                                }
                                sessionStorage('token').set("Authorization", res.data.token);
                                sessionStorage('userId').set('userId', data);
                                const userInfo = {
                                    createUserId: res.data.data.userId,
                                    createUserName: res.data.data.userName,
                                    createOrgId: res.data.data.orgInfo.orgId,
                                    createOrgName: res.data.data.orgInfo.orgName
                                }
                                sessionStorage('paramUserInfo').set('userInfo', JSON.stringify(userInfo));
                                let redirect = decodeURIComponent('/');
//                                console.log(redirect);
                                this.$router.push({path: redirect})
                                this.$Message.info('登录成功');
                            } else {
                                this.$Message.error('账号/密码错误');
                            }
                        }).catch(e => {
                            console.error(e);
                            this.$Message.error('请求失败');
                        })
                    }
                });
            },


            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == 'userName') {
                            this.formInline.user = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.formInline.password = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function(user) {
                this.setCookie(user, "", -1); //修改2值都为空，天数为负1天就好了
            }
        }
    }
</script>

<style scoped>
    @media screen and (min-width: 1400px) {
        .clogin {
            background-position: 0px 0px;
        }
    }

    .all {
        width: 680px;
        height: 320px;
        overflow: hidden;
        display: table;
        margin: auto
    }

    #left-model, #right-model {
        display: table-cell;
    }

    .left-model {
        /*flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        width: 340px;
        height: 320px;
        background: #FFFFFF55;
        position: relative;
        /*margin: auto;*/
    }

    .clogin {
        display: flex;
        flex-direction:column;
        justify-content: flex-end;
        background-image: url(../../assets/img/login-bg1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100vh;
        min-height: 500px;
    }

    .fontName {
        width: 220px;
        height: 23px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666465;
    }

    .cloginLogo {
        margin-left: 10vh;
        margin-top: 10vh;
    }

    .login_box {
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        background: #FFFFFF;
        width: 340px;
        height: 320px;
        /*margin-top:91px;*/
        margin: auto;
        /*border-radius: 10px;*/
    }

    .clogin_title {
        flex: auto;
        margin-top: 33px;
        width: 73px;
        height: 17px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666465;
    }

    .clogin_input {
        width: 260px;
        background: #F9F9F9;
        border: 0 solid #DBDBDB;
        border-radius: 4px;
    }

    .clogin_buttonInput {
        width: 260px;
        height: 34px;
        background: #E3393B;
        border-radius: 4px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }

    /* element.style {
         width: 260px;
         margin: auto;
     }*/
    .clogin_remeberMe {
        width: 90px;
        height: 12px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #B3B3B3;
    }

    .clogin_code {
        width: 100px;
        height: 12px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #B3B3B3;
    }

    .clogin_code:hover{
        width: 100px;
        height: 12px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #e3393c;
    }

    .hse_logo {
        margin: 30px;
    }

    .loginselect {
        width: 120px;
        position: relative;
    }

    .bottomTips {
        margin-bottom:30px;
        display: flex;
        flex-direction:column;
        align-items:center;
        justify-content: center;
        width: 100%;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #757575;
    }

    .bottomTipsA {
        color: #9BADCB;
        padding: 0 15px 0 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: 8%;
        margin-top: auto;
        margin-right: auto;
    }

    .swiper1 {
        width: 450px;
        height: 450px;
    }

    .swiper2 {
        width: 600px;
        height: 600px;
    }
</style>
